React Navigation এর সাথে Redux Integration

React Navigation হলো React Native অ্যাপ্লিকেশনগুলোতে নেভিগেশন পরিচালনার জন্য একটি জনপ্রিয় লাইব্রেরি। একদিকে, Redux অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট জন্য ব্যবহৃত হয়। কখনও কখনও, আমরা চাই যে আমাদের অ্যাপ্লিকেশনটি নেভিগেশন এবং স্টেট ম্যানেজমেন্টকে একসাথে পরিচালনা করুক। React Navigation এবং Redux-এর সঠিক ইন্টিগ্রেশন আমাদের অ্যাপ্লিকেশনকে আরও শক্তিশালী এবং স্কেলেবল করতে সাহায্য করে।

Redux এবং React Navigation এর ইন্টিগ্রেশন সাধারণত স্টেট ম্যানেজমেন্ট এবং নেভিগেশন অবস্থার মধ্যে তথ্য স্থানান্তর করতে সহায়ক হয়। যেমন, যদি কোনও ব্যবহারকারী একটি পেজে প্রবেশ করার সময় কিছু স্টেট পরিবর্তন করে, তখন Redux সেটি সঠিকভাবে ট্র্যাক করতে এবং React Navigation এর মাধ্যমে অ্যাপ্লিকেশনে সেই পরিবর্তন প্রভাব ফেলতে সাহায্য করে।

Step 1: প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করা

প্রথমে, আপনাকে React Navigation এবং Redux-এর জন্য প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করতে হবে।

npm install @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-reanimated react-native-screens react-navigation redux react-redux

Step 2: Redux Setup

১. Redux Store তৈরি করা:

প্রথমে Redux Store সেট আপ করতে হবে। Redux স্টোরের মধ্যে আপনি আপনার অ্যাপের গ্লোবাল স্টেট সংরক্ষণ করবেন।

// store.js
import { createStore } from 'redux';

// Simple Reducer
const initialState = {
  user: null,
  isLoggedIn: false,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        user: action.payload,
        isLoggedIn: true,
      };
    case 'LOGOUT':
      return {
        ...state,
        user: null,
        isLoggedIn: false,
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

২. Redux Provider যোগ করা:

আপনি আপনার অ্যাপ্লিকেশনে Redux Store ব্যবহার করার জন্য Provider-এর মাধ্যমে স্টোরটি অ্যাপের মধ্যে প্রদান করবেন।

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Provider } from 'react-redux';
import store from './store';  // store.js থেকে স্টোর ইনপোর্ট করুন
import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Login" component={LoginScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
};

export default App;

Step 3: React Navigation Integration with Redux

React Navigation এবং Redux একত্রে ব্যবহারের জন্য আমরা সাধারণত React Navigation এর useNavigation হুক এবং Redux এর useSelector এবং useDispatch হুক ব্যবহার করি।

১. Redux স্টেট ব্যবহার করা:

ধরি, আমাদের একটি HomeScreen যেখানে আমাদের লগ ইন স্টেট চেক করতে হবে এবং সেই অনুযায়ী নেভিগেট করতে হবে।

// screens/HomeScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigation } from '@react-navigation/native';

const HomeScreen = () => {
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const isLoggedIn = useSelector(state => state.isLoggedIn);

  const handleLogin = () => {
    // Dispatch login action
    dispatch({
      type: 'LOGIN',
      payload: { name: 'John Doe' },
    });
    navigation.navigate('Login');
  };

  return (
    <View>
      <Text>{isLoggedIn ? 'Welcome Back!' : 'Please Log in'}</Text>
      {!isLoggedIn && <Button title="Login" onPress={handleLogin} />}
    </View>
  );
};

export default HomeScreen;

২. LoginScreen-এ Redux স্টেট আপডেট করা:

এখানে আমরা LoginScreen তৈরি করব, যেখানে Redux এর মাধ্যমে লগ ইন স্টেট আপডেট হবে এবং নেভিগেশন পরিচালনা করা হবে।

// screens/LoginScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useDispatch } from 'react-redux';

const LoginScreen = () => {
  const dispatch = useDispatch();

  const handleLogout = () => {
    // Dispatch logout action
    dispatch({ type: 'LOGOUT' });
  };

  return (
    <View>
      <Text>You are logged in now.</Text>
      <Button title="Logout" onPress={handleLogout} />
    </View>
  );
};

export default LoginScreen;

Step 4: Redux and Navigation Flow

এখন, আমরা দেখেছি কিভাবে HomeScreen এবং LoginScreen এর মধ্যে Redux এবং React Navigation একসাথে কাজ করছে:

• HomeScreen এ, আমরা Redux Store থেকে লগ ইন স্টেট ব্যবহার করি এবং যদি ব্যবহারকারী লগ ইন না থাকে তবে LoginScreen-এ নেভিগেট করি।
• LoginScreen এ, ব্যবহারকারী লগ আউট করার পর, Redux স্টেটকে আপডেট করে এবং লগ আউট হয়ে HomeScreen-এ ফিরিয়ে আনা হয়।

Step 5: App Flow এবং Redux Handling

এটি আমাদের অ্যাপ্লিকেশনের React Navigation এবং Redux এর একত্রে ব্যবহারের মাধ্যমে একটি সাধারণ স্টেট ম্যানেজমেন্ট এবং নেভিগেশন ব্যবস্থাপনা। এই কাঠামোটি অ্যাপ্লিকেশনগুলিতে স্টেট ব্যবস্থাপনা এবং নেভিগেশন উভয়ই সুসংগতভাবে পরিচালনা করতে সহায়ক।

সারাংশ

React Navigation এবং Redux একত্রে ব্যবহারের মাধ্যমে আমরা অ্যাপ্লিকেশনের নেভিগেশন এবং স্টেট ম্যানেজমেন্ট একসাথে পরিচালনা করতে পারি। React Navigation আমাদের নেভিগেশন স্টেট ম্যানেজ করতে সাহায্য করে, আর Redux আমাদের অ্যাপের গ্লোবাল স্টেট ম্যানেজ করতে সক্ষম। useSelector এবং useDispatch হুক ব্যবহার করে Redux স্টোর থেকে ডাটা নিয়ে React Navigation এর মাধ্যমে নেভিগেশন পরিচালনা করা সহজ হয়।